<template>
	<view class="data_list_view camera_record">
		<template v-if="list.length">
			<view class="header">提示：照片记录只保留30天，请尽快下载到相册</view>
			<!-- 数据列表 -->
			<view class="list_item" v-for="(item, index) in list" :key="index">
				<view class="list_item_info">
					<view class="list_item_info_img">
						<image :src="item.showImage"></image>
					</view>
					<view class="list_item_info_right">
						<view class="list_item_info_rCon1">
							<view class="list_item_info_rCon1_t1">{{ item.productName }}</view>
							<!-- 形象照状态：未支付、生成中、已生成 -->
							<view v-if="item.recordType === 11" :class="{ 
								'list_item_info_rCon1_t2Err' : item.payStatus === 0, //未支付
								'list_item_info_rCon1_t2Blue' : item.payStatus === 1 && !item.showImage, //已支付生成中
								'list_item_info_rCon1_t2Green' : item.payStatus === 1 && item.showImage, //已支付已生成
							}" class="list_item_info_rCon1_t2">{{ item.payStatus == 1 ? (item.showImage ? '已生成' : '生成中') : '未支付' }}</view>

							<view class="list_item_info_bottom">
								<view v-if="item.payAmountUnit === 1" class="list_item_info_price">
									￥{{ item.payAmount / 100 }}</view>
								<view v-else class="list_item_info_price">{{ item.payAmount }}金豆</view>
								<view class="list_item_info_time">{{ item.payTime }}</view>
							</view>
						</view>
						<!-- 形象照不展示套餐，展示文件大小 -->
						<view class="list_item_info_rCon2" v-if="item.recordType === 11">文件大小：{{ item.photoSize || '--' }}</view>
						<view class="list_item_info_rCon2" v-else>套餐：{{ item.packageName }}</view>
						
						<view class="list_item_info_rCon2">照片尺寸：{{ item.pixelSize || '--' }} 像素</view>
						<view class="list_item_info_rCon2" v-if="item.backgroup">
							所选背景色：
							<view class="list_item_info_background" :style="{backgroundColor: item}"
								v-for="(item, index) in item.backgroup.split(',')" :key="index"></view>
						</view>
					</view>
				</view>
				<view class="list_item_btnBox">
					<view class="list_item_btn" v-if="item.payStatus == 1 && item.showImage && isLongTime(item.payTime)" @tap="copyImgLink(item.showImage)">复制链接
					</view>
					<view class="list_item_btn" @tap="delImgRecord(item.id, index)">删除</view>
					<view class="list_item_btn" v-if="item.payStatus == 1 && item.showImage && isLongTime(item.payTime)"
						@tap="downloadImg(item)">下载照片</view>
					<!-- <view class="list_item_btn" @tap="washImg(item.id)">冲洗照片</view> -->
				</view>
			</view>
		</template>
		<emptyData v-else :title="emptyTitle" :loading="loading"></emptyData>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		saveAllPhoto
	} from '@/common/js/method.js'

	// 页面加载完成
	onLoad(() => {
		getList();
	})

	onReachBottom(() => {
		if (page.pageCurrent > page.pageNo) {
			page.pageNo = page.pageNo + 1;
			getList();
		}
	})

	// 无数据显示
	import emptyData from '../../components/empty_data/empty_data.vue';
	const emptyTitle = ref('照片记录');

	// 加载状态
	const loading = ref(false);
	// 记录列表
	let list = ref([])
	const page = reactive({
		pageNo: 1,
		pageSize: 10,
		total: 0,
		pageCurrent: 0
	})
	// 获取列表
	function getList() {
		loading.value = true;
		uni.showLoading({
			title: '加载中',
			mask: false
		})
		uni.$request('/api/busi/photo/record/select', {
			pageNo: page.pageNo,
			pageSize: page.pageSize
		}).then((res) => {
			if (res.status == 200) {
				if (res.data.total) {
					page.total = res.data.total;
					page.pageCurrent = res.data.total / page.pageSize
				}
				let data = res.data.photoRecordList;
				if (data.length) {
					for (let item of data) {
						if (item.imageUrl && item.imageUrl.includes('{')) {
							let imageUrlJson = JSON.parse(item.imageUrl);
							for (let key in imageUrlJson) {
								item.showImage = imageUrlJson[key];
								break;
							}
						} else {
							item.showImage = item.imageUrl;
						}
					}
					list.value = list.value.concat(data);
				}
			}
			uni.hideLoading();
			loading.value = false;
		}).catch((err) => {
			console.log(err, 'cameraRecordErr');
			uni.hideLoading();
			uni.showToast({
				icon: 'error',
				title: '延迟请重试！'
			})
		})
	}

	// 删除记录
	function delImgRecord(id, index) {
		uni.showModal({
			title: '是否删除',
			success(res) {
				console.log(res);
				if (!res.confirm) return;
				uni.$request('/api/busi/photo/record/delete', {
					id
				}).then((res) => {
					if (res.status == 200) {
						list.value.splice(index, 1);
						page.total = page.total - 1;
						page.pageCurrent = res.data.total / page.pageSize

						uni.showToast({
							title: '删除成功',
							icon: 'success',
							mask: true
						});
					}
				})
			}
		})

	}
	// 跳转至菜单页面
	function toNav(path) {
		uni.navigateTo({
			url: path,
			fail(err) {
				console.log(err);
			}
		})
	}

	function copyImgLink(imageUrl) {
		//复制到剪切板
		uni.setClipboardData({
			data: imageUrl,
			success() {
				uni.$u.toast('已复制到剪切板，请打开浏览器粘贴到地址栏下载')
			}
		});
	}
	// 下载图片
	async function downloadImg(item) {
		if (item.payStatus != 1) {
			uni.showToast({
				title: '请支付订单',
				icon: 'error'
			})
			return
		}
		uni.showLoading({
			title: '加载中'
		})

		let imgObj;
		try {
			imgObj = {
				photoUrls: JSON.parse(item.imageUrl)
			};
		} catch (e) {
			imgObj = {
				photoUrls: {
					'key': item.imageUrl
				}
			}
		}
		saveAllPhoto(imgObj)
	}
	// 是否超过30天
	function isLongTime(payTime) {
		// 获取当前日期
		var currentDate = new Date();

		// 获取目标日期
		var targetDate = new Date(payTime);

		// 计算两个日期之间的天数差
		var timeDiff = Math.abs(currentDate.getTime() - targetDate.getTime());
		var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
		console.log(diffDays, 'diffDays');
		// 判断是否超过30天
		if (diffDays > 30) {
			return false;
		}
		return true;
	}
	// 冲洗照片
	function washImg(id) {

	}
</script>

<style lang="less" scoped>
	.data_list_view {
		position: relative;
		min-height: 100vh;
		width: 100%;
		box-sizing: border-box;
		background-color: #f5f5f5;
		padding: 20rpx 0;
	}

	.header {
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 35rpx;
		color: #A6A6A6;
		margin-bottom: 20rpx;
	}

	.list_item {
		margin-bottom: 20rpx;
		background-color: #ffffff;
	}

	.list_item:last-child {
		margin-bottom: 0;
	}

	.list_item_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border: 2rpx solid #f5f5f5;

		.list_item_info_img {
			width: 160rpx;
			height: 214rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.list_item_info_right {
			position: relative;
			width: calc(100% - 180rpx);
			height: 214rpx;
		}

		.list_item_info_rCon1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.list_item_info_rCon1_t1 {
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 37rpx;
			color: rgba(56, 56, 56, 1);
		}

		.list_item_info_rCon1_t2 {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 41rpx;
			color: rgba(166, 166, 166, 1);
		}

		.list_item_info_rCon1_t2Err {
			color: rgba(212, 48, 48, 1);
		}
		.list_item_info_rCon1_t2Blue {
			color: rgba(69, 145, 230, 1);
		}
		.list_item_info_rCon1_t2Green {
			color: rgba(67, 207, 124, 1);
		}

		.list_item_info_rCon2 {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 6rpx;
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 35rpx;
			color: rgba(166, 166, 166, 1);
		}

		.list_item_info_background {
			height: 20rpx;
			width: 20rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.list_item_info_bottom {
			position: absolute;
			bottom: 0;
			right: 0;
		}

		.list_item_info_price {
			text-align: right;
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0;
			color: rgba(56, 56, 56, 1);
		}

		.list_item_info_time {
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0;
			color: rgba(166, 166, 166, 1);
		}
	}

	.list_item_btnBox {
		padding: 32rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.list_item_btn {
			margin-right: 20rpx;
			padding: 12rpx 40rpx;
			border-radius: 200rpx;
			border: 2rpx solid rgba(229, 229, 229, 1);
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 35rpx;
			color: rgba(56, 56, 56, 1);
		}

		.list_item_btn:last-child {
			margin-right: 0;
		}
	}
</style>